<script setup lang="ts">
  import { EmployeeSexEnum } from '@/shared'
  import type { EmployeeEntity } from '@/shared/entity/employee'
  import { EmployeeSexOption } from '@/shared/options'
  import { DoPost, DoPut } from '@/utils/http'
  import { Modal, Form, Input, RadioGroup, Message } from '@arco-design/web-vue'
  import { isEmpty, pick } from 'lodash-es'
  import { computed, reactive, useTemplateRef, watch } from 'vue'

  interface IProps {
    initialValues?: Partial<EmployeeEntity>
  }

  const props = defineProps<IProps>()

  const emits = defineEmits<{
    (e: 'refresh'): void
  }>()

  const visible = defineModel({
    type: Boolean || undefined
  })

  const formRef = useTemplateRef('formRef')

  const formData = reactive<Record<string, any>>({
    name: '',
    username: '',
    phone: '',
    sex: EmployeeSexEnum.Male,
    idNumber: ''
  })

  const isEdit = computed(() => !isEmpty(props.initialValues))

  watch(visible, val => {
    if (val) {
      if (isEdit.value) {
        Object.assign(
          formData,
          pick(props.initialValues, ['name', 'username', 'phone', 'sex', 'idNumber'])
        )
      }
    } else {
      for (const key in formData) {
        if (key === 'sex') {
          formData[key] = EmployeeSexEnum.Male
        } else {
          formData[key] = ''
        }
      }
    }
  })

  const handlerSubmit = async () => {
    const data = await formRef.value?.validate()
    if (!isEmpty(data)) return false
    if (isEdit.value) {
      await DoPut('/employee', {
        ...formData,
        id: props.initialValues?.id
      })
      Message.success('编辑成功')
    } else {
      await DoPost('/employee', formData)
      Message.success('添加成功')
    }
    emits('refresh')
  }
</script>

<template>
  <Modal
    :title="isEdit ? '编辑员工' : '添加员工'"
    title-align="start"
    v-model:visible="visible"
    :mask="false"
    modal-class="create-employee"
    body-class="create-employee-body"
    @before-ok="handlerSubmit"
  >
    <Form :model="formData" layout="vertical" ref="formRef">
      <Form.Item field="username" label="账号" :rules="[{ required: true }]">
        <Input placeholder="请输入账号" v-model="formData.username" />
      </Form.Item>
      <Form.Item field="name" label="姓名" :rules="[{ required: true }]">
        <Input placeholder="请输入姓名" v-model="formData.name" />
      </Form.Item>
      <Form.Item
        field="phone"
        label="手机号"
        :rules="[
          { required: true, message: '请输入手机号' },
          { match: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
        ]"
      >
        <Input placeholder="请输入手机号" v-model="formData.phone" />
      </Form.Item>
      <Form.Item field="sex" label="性别" :rules="[{ required: true, message: '请选择性别' }]">
        <RadioGroup :options="EmployeeSexOption" placeholder="请选择性别" v-model="formData.sex" />
      </Form.Item>
      <Form.Item
        field="idNumber"
        label="身份证号"
        :rules="[{ required: true, message: '请输入身份证号' }]"
      >
        <Input placeholder="请输入身份证号" v-model="formData.idNumber" />
      </Form.Item>
    </Form>
  </Modal>
</template>

<style lang="less">
  .create-employee {
    border-color: #eaedf1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column;
    height: calc(100% - 50px);
    margin: 60px 0 0 72px;
    width: calc(100% - 72px);
    &-body {
      flex: 1;
      overflow: hidden;
    }
  }
</style>
